<script setup>
import { ref, computed } from 'vue';
var option2 = computed(() => {
    return {
        title: {
            text: '律师受理案件数量'
        },
        dataset: {
            source: [
                ['score', 'amount', 'product'],
                [89.3, 58212, '律师1'],
                [57.1, 78254, '律师2'],
                [74.4, 41032, '律师3'],
                [50.1, 12755, '律师4'],
                [89.7, 20145, '律师5'],
                [68.1, 79146, '律师6'],
                [19.6, 91852, '律师7'],
                [10.6, 101852, '律师8'],
                [32.7, 20112, '律师9']
            ]
        },
        xAxis: {},
        yAxis: { type: 'category' },
        series: [
            {
                type: 'bar',
                encode: {
                    // 将 "amount" 列映射到 X 轴。
                    x: 'amount',
                    // 将 "product" 列映射到 Y 轴。
                    y: 'product'
                },
                label: {
                    show: true,
                    position: 'right',
                }
            }

        ]
    }

});
//模拟数据value的字段对应Y轴，name字段对应X轴
const data = ref([
    //假数据
    { value: 22012, name: '1月份' },
    { value: 31011, name: '2月份' },
    { value: 75010, name: '3月份' },
    { value: 2501, name: '4月份' },
    { value: 16010, name: '5月份' },
    { value: 16010, name: '6月份' },
    { value: 1601, name: '7月份' },
    { value: 160144, name: '8月份' },
    { value: 1454, name: '9月份' },
    { value: 56877, name: '10月份' },
    { value: 6447, name: '11月份' },
    { value: 64566, name: '12月份' },
])

const option = computed(() => {
    return {
        title: {
            text: '月收受案件总数量'
        },
        xAxis: {
            type: 'category',
            data: data.value.map(v => v.name)
        },
        yAxis: {
            type: 'value',
        },
        series: [
            {
                type: 'line',
                label: {
                    show: true
                },
                data: data.value.map(v => v.value)
            },

        ]
    }
})

const option3 = computed(() => {
    return {
        title: {
            text: '案件分类数量'
        },
        xAxis: {
            data: ['刑事案件', '民事案件', '行政案件']
        },
        yAxis: {},
        series: [
            {
                label: {
                    show: true,
                    position:'top'
                },
                type: 'bar',
                data: [2377, 6733, 9872],
                itemStyle: {
                    color: function (params) {
                        // 根据数据索引返回不同的颜色
                        var colorList = ['#c23531', '#2f4554', '#61a0a8', '#d48265', '#91c7ae', '#749f83', '#ca8622'];
                        return colorList[params.dataIndex];
                    }
                }
            },

        ]
    }

});
const option4 = computed(() => {
    return {
        title: {
            text: '客户地区数据统计'
        },
        series: [
            {
                label: {
                    show: true,
                    formatter: function (params) {
                        // 返回名称、值和保留一位小数的百分比
                        return `${params.name}: ${(params.percent).toFixed(1)}%`;
                    }
                },
                type: 'pie',
                data: [
                    {
                        value: 9856,
                        name: '山东省'
                    },
                    {
                        value: 4582,
                        name: '河南省'
                    },
                    {
                        value: 7953,
                        name: '河北省'
                    },
                    {
                        value: 5899,
                        name: '山西省'
                    },
                    {
                        value: 7856,
                        name: '江西省'
                    }
                ],
                roseType: 'area'
            }
        ]
    }

})
</script>

<template>
    <el-row :gutter="20">
        <el-col :span="12">
            <el-card class="card1">
                <e-charts class="chart" :option="option" />
            </el-card>
        </el-col>
        <el-col :span="12">
            <el-card class="card1">
                <e-charts class="chart" :option="option2" />
            </el-card>
        </el-col>
    </el-row>
    <br>
    <el-row :gutter="20">
        <el-col :span="12" :gutter="20">
            <el-card class="card1">
                <e-charts class="chart" :option="option3" />
            </el-card>
        </el-col>
        <el-col :span="12">
            <el-card class="card1">
                <e-charts class="chart" :option="option4" />
            </el-card>
        </el-col>
    </el-row>

</template>

<style lang="scss">
.card1 {
    height: 450px;
    width: 600px;
}

.chart {
    width: 550px;
    height: 400px;
}
</style>